import React, {Component} from 'react';
import '../assets/style/ChoosePlace.less'
import {SearchBar} from 'antd-mobile';

const {
    BMapGL,
    BMAP_STATUS_SUCCESS
} = window;
export default class one extends Component {
    constructor(props) {
        super(props);
        this.state = {value: '美食', map: []};
        this.go = this.go.bind(this)
    }

    componentDidMount() {
        console.log(this.props)
        this.map = new BMapGL.Map("map");
        this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
        this.local = new BMapGL.LocalSearch(this.map, this.options);
        // this.local.search("公园");
    }

    go(e) {
        // console.log('mes',e)
        this.props.history.replace({
            pathname: '/gbuyhouse',
            query: {name: e}
        });
    }

    onChange = (value) => {
        this.setState({value});
    };
    clear = () => {
        this.setState({value: ''});
    };
    onSubmit = async (e) => {
        const that = this
        this.options = {
            onSearchComplete: async function (results) {
                // 判断状态是否正确
                if (that.local.getStatus() === BMAP_STATUS_SUCCESS) {
                    var s = [];
                    for (var i = 0; i < results.getCurrentNumPois() - 3; i++) {
                        s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                    }
                    if (s.length > 0) {
                        that.setState({
                            map: s
                        })
                    }
                }
            }
        };
        this.local = new BMapGL.LocalSearch(this.map, this.options);
        this.local.search(e);
    }

    render() {
        console.log(53, this.props)
        return (
            <div>
                <div className='Choose_top'>
                    <SearchBar
                        value={this.state.value}
                        placeholder="Search"
                        onSubmit={(e) => this.onSubmit(e)}
                        onClear={value => console.log(value, 'onClear')}
                        showCancelButton
                        onChange={this.onChange}
                    />
                </div>
                <div className='Choose_map'>
                    <div id='map'></div>
                </div>
                <div className='Choose_but'>
                    <ul>
                        {
                            this.state.map.map((number) => <li onClick={() => this.go(number)}>
                                <div className='mapOne'>{number}</div>
                                <svg t="1627389126131" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="2606" width="200" height="200">
                                    <path
                                        d="M332.8 906.24a35.84 35.84 0 0 0 25.344-10.24l358.4-358.4a35.84 35.84 0 0 0 0-50.688l-358.4-358.4a35.84 35.84 0 0 0-50.688 50.688l333.056 332.8-333.056 332.8A35.84 35.84 0 0 0 332.8 906.24z"
                                        p-id="2607" fill="#CECECE"></path>
                                </svg>
                            </li>)
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
